<template>
    <div class="outer-container">
      <div class="form-container">
        <h2>注册</h2>
        <el-form>
          <el-form-item>
            <el-input
              placeholder="电子邮箱"
              prefix-icon="message"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="验证码"
              prefix-icon="lock"
            >
              <template #suffix>
                <el-button
                  class="verification-btn"
                  type="primary"
                  size="small"
                  @click="getVerificationCode"
                >获取验证码</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              type="password"
              placeholder="设置密码"
              prefix-icon="lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              type="password"
              placeholder="确认密码"
              prefix-icon="lock"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="姓名"
              prefix-icon="user"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              placeholder="身份"
              prefix-icon="user"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="submit">登录</el-button>
          </el-form-item>
          <el-form-item>
            <p class="register-text">没有账号，立即注册?</p>
            <el-button type="text" class="register-btn" @click="register">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="image-container">
        <img src="../assets/svg/register/pic1.svg" alt="Illustration" />
      </div>
    </div>
  </template>

  <style scoped>
  .outer-container {
    display: flex;
    height: 80%;
    width: 70%;
    margin-left: 220px;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }

  .form-container {
    background-color: #ffffff4c;
    padding: 40px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
    width: 50%; /* 左侧部分宽度 */
  }

  h2 {
    margin-bottom: 20px;
    color: #1A1A1A;
  }

  .form-group {
    position: relative;
    margin-bottom: 20px;
  }

  .form-group input {
    display: flex;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    outline: none;
    color: #000000;
    border: 2px solid #D0D0D0 ;
  }

  .verify-btn {
    position: absolute;
    right: 10px;
    top: 5px;
    background-color: #3A8FE6;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
  }

  .submit-btn {
    width: 100%;
    background-color: #3A8FE6;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 10px;
    cursor: pointer;
  }

  .register-btn {
    width: 100%;
    background-color: #ffffff4c;
    color: #3A8FE6;
    border: none;
    border-radius: 24px;
    padding: 10px;
    cursor: pointer;
    border: 1px solid #3A8FE6 ;
  }
  .register-btn {
    margin-top: 10px; /* 添加间距 */
  }

  .forgot-password {
    display: block;
    text-align: right;
    color: #88aaff;
    text-decoration: none;
    margin-top: -10px;
    margin-bottom: 20px;
  }

  .register-link {
    text-align: center;
    color: #aaa;
  }

  .register-link a {
    color: #88aaff;
    text-decoration: none;
  }

  .register-text {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #828282;
  margin-left: 150px;
}
  .image-container {
    width: 60%; /* 右侧部分宽度 */
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #F6FBFF; /* 可设置为背景色或使用图片 */
  }

  .image-container img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px; /* 圆角 */
  }
  </style>
